// 在线接口地址: http://121.89.205.189:3000/admindoc

/*
  登录流程
    1. 进入登录页面先做预登录, 得到后端生成的公钥
    2. 登录页面填写用户名和密码, 用公钥对用户名和密码进行加密
    3. 将密文发送给后端, 后端返回token和role等
    4. 将后端返回的信息保存在本地存储, 登录完之后的所有的接口都要带上token
    5. 根据role，去生成对应的menu
    6. 防止用户改变url从而进入无权限的页面(不需要前端做，后端是可以根据token知道是否要返回数据)
*/

import styles from './index.less';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, message } from 'antd';

import request from 'umi-request';
import { history } from 'umi';

import { loginApi } from '@/api/login';

const Index = () => {
  const onFinish = async (values: any) => {
    const res = await loginApi({
      adminname: values.username,
      password: values.password,
    });

    if (res) {
      message.success(res.message);
      localStorage.setItem('token', res.data.token);
      localStorage.setItem('adminname', res.data.adminname);
      localStorage.setItem('checkedkeys', JSON.stringify(res.data.checkedkeys));
      history.push('/');
    }

    // loginApi({
    //   adminname: values.username,
    //   password: values.password,
    // }).then((res) => {
    //   console.log(res);
    // });
    // request
    //   .post('http://121.89.205.189:3000/admin/admin/login', {
    //     data: {
    //       adminname: values.username,
    //       password: values.password,
    //     },
    //   })
    //   .then((res) => {
    //     if (res.code === '200') {
    //       message.success(res.message);
    //       localStorage.setItem('token', res.data.token);
    //       localStorage.setItem('adminname', res.data.adminname);
    //       localStorage.setItem(
    //         'checkedkeys',
    //         JSON.stringify(res.data.checkedkeys),
    //       );
    //       history.push('/');
    //     } else {
    //       message.error(res.message);
    //     }
    //   })
    //   .catch((error) => {
    //     console.log(error);
    //   });
  };

  return (
    <div>
      <h1 className={styles.h1}>嗨购后台管理系统</h1>
      <Form
        style={{ width: 300, margin: '50px auto' }}
        name="normal_login"
        className="login-form"
        initialValues={{ remember: true }}
        onFinish={onFinish}
      >
        <Form.Item
          // name表示的是最后得到的对象的字段
          name="username"
          // rules表示表单验证
          rules={[
            { required: true, message: '请输入用户名!' },
            { max: 5, message: '用户名过长' },
          ]}
          // 如果有required: true，那么前面会加红色的星
          // label="用户名"
          // labelCol表示label占的总宽度的比例
          // labelCol={{ span: 6 }}
          // wrapperCol表示表单控件占的总宽度的比例
          // wrapperCol={{ span: 18 }}
        >
          {/* 有了Form之后，表单控件都不需要转成受控组件了 */}
          <Input
            prefix={<UserOutlined className="site-form-item-icon" />}
            placeholder="Username"
          />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[{ required: true, message: 'Please input your Password!' }]}
          // label="密码"
          // labelCol={{ span: 6 }}
        >
          <Input
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder="Password"
          />
        </Form.Item>
        <Form.Item>
          <Form.Item name="remember" valuePropName="checked" noStyle>
            <Checkbox>Remember me</Checkbox>
          </Form.Item>
        </Form.Item>

        <Form.Item>
          {/* 如有按钮带有htmlType="submit"，就会触发form组件的onFinish方法 */}
          <Button type="primary" htmlType="submit" style={{ width: '100%' }}>
            Log in
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default Index;
